<template>
    <div class="pre-order">
        <h1>确认订单</h1>
        <el-table :data="tableData" v-loading="tableLoading" style="width: 100%">
            <el-table-column align="center" prop="productName" label="产品名称" width="180">
                <template #default="{ row }">
                    <img :src="row.imageUrl" width="50" alt="" style="vertical-align:middle;margin-right:5px">
                    <b style="vertical-align:middle">{{ row.productName }}</b>
                    <p>{{ row.description }}</p>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="price" label="单价" width="180">
                <template #default="{ row }">
                    <b style="color:red">{{ row.price.toFixed(2) }}</b>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="" label="数量">
                <el-input-number v-model="quantity" :min="1" :max="30" @change="handleChange" />
            </el-table-column>
            <el-table-column align="center" prop="address" label="总金额">
                <b style="color:red">{{ total }}</b>
            </el-table-column>
        </el-table>
        <!-- //确认订单的按钮 -->
        <div class="total-fee">
            <div class="box-wrap">
                <div class="box-shadow">
                    <span class="realpay--title"
                          data-spm-anchor-id="a210c.1.0.i0.52681deblyKpHg">实付款:</span>
                    <span class="realpay--price-symbol">¥</span>
                    <span class="realpay--price"
                          style="color: rgb(255, 80, 0)">{{ total }} </span>
                    <div class="order-confirmAddr">
                        <div class="confirmAddr-addr-user">
                            <span class="confirmAddr-title">充值详情：{{ tableData[0].description }}</span><span
                                  class="confirmAddr-pro">

                            </span>
                        </div>
                        <div class="confirmAddr-addr">
                            <span class="confirmAddr-title">充值账户：</span>
                            <span
                                  class="confirmAddr-usn">
                                {{ userStore.userInfo.nickname }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btn">
                <el-button type="danger" @click="handlePreoreder">提交订单</el-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useRoute, useRouter } from "vue-router"
import * as api from "@/api/vip"
import { ref } from "vue"
import useUsers from "@/store/users"
import { ElMessageBox, ElMessage } from "element-plus"
let userStore = useUsers()
let route = useRoute()
let router = useRouter()
//预支付页面(就是让用于提交订单)

//一般的支付流程

//1.获取产品的id和产品的数量

//2.提交订单,传递id和数量(服务器会生成订单,并且返回给前端)

//3.支付,携带订单id

const tableData = ref()

let tableLoading = ref(true)

//获取通过query传递过来的product_id,携带给后端,获取产品详情,展示给用看

let product_id = route.query.product_id;

let productDetail = await api.getProductApi(product_id)

tableLoading.value = false;

// console.log(productDetail)
//赋值给表格数据
tableData.value = productDetail.data.data


//统计购买数量
let quantity = ref(1);
//计算总价格
let total = ref()
//总价格的初始值应该是当前产品的单价
total.value = tableData.value[0].price.toFixed(2)
let handleChange = () => {
    // console.log(quantity.value)
    total.value = (quantity.value * tableData.value[0].price).toFixed(2)
}

//下单
let handlePreoreder = () => {
    //请求下单的接口
    console.log('222')
    ElMessageBox({
        title: '确认订单',
        message: '是否确定要提交订单?',
        showCancelButton: true,
        cancelButtonText: '取消',
        confirmButtonText: '确定'
    })
        .then(async () => {
            try {
                let res = await api.preOrderApi(product_id, quantity.value)
                //取出后台返回的订单id
                let order_id = res.data.order_id;

                //跳转到支付页面,携带订单id

                router.push({ name: 'payment', query: { order_id } })

            } catch (e) {

            }
        })
        .catch(() => {
            ElMessage.warning('已经取消下单')
        })

}

</script>
<style lang="scss" scoped>
.price {
    color: #ff0036;
    font-weight: bolder;
}

.total_fee {
    font-size: 16px;
    color: #ff0036;
}

.el-button {
    width: 180px;
    border-radius: 0;
}

.confirm-title {
    text-align: left;
    margin-bottom: 30px;
}

.pre-order {
    padding: 80px 100px 0 100px;
    background-color: #fff;
}

.total-fee {
    margin-top: 50px;
    text-align: right;
}

.box-wrap {
    display: inline-block;
    border: 1px solid #ff0036;

    .box-shadow {
        border: 3px solid #fff0e8;
        min-width: 300px;
        padding: 10px 5px 10px 20px;

        .realpay--title {
            font-weight: 700;
            color: #333;
        }

        .realpay--price-symbol {
            font-size: 26px;
            margin-right: 4px;
            color: #999;
        }

        .realpay--price {
            color: #ff0036;
            font: 700 26px tahoma;
        }

        .order-confirmAddr {
            line-height: 1.6;
            font-weight: bolder;
            margin-top: 10px;
            font-size: 16px;

            // text-align: center;
            // font-family: "PingFang SC";
            .confirmAddr-usn {
                color: #ff0036;
                font-size: 20px;
            }

            .confirmAddr-pro {
                color: goldenrod;
                font-size: 16px;
            }
        }
    }
}
</style>